import { PlusOutlined } from '@ant-design/icons';
import { Tag, Divider,Button } from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { UserTableListItem } from './data';
import userList from '../funcs/user_list';
import CreateForm from './createuser/createform';
import UpdateForm from './updateuser/updateUser';
import userCreate from '../funcs/user_create';
import userauthorityList from '../funcs/user_authority_list';

const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
  const [stepFormValues, setStepFormValues] = useState({});
  const [userid, setuserId] = useState<string>();
  const request = async () => {
    return await userauthorityList({})
  };
  
  const columns: ProColumns<UserTableListItem>[] = [
    {
      title: "用户名",
      dataIndex: 'username',
      valueType: 'text',
    },
    {
      title: "密码",
      dataIndex: 'password',
      valueType: 'password',
      hideInTable:true,
      search:false
    },
    {
      title: "权限",
      dataIndex: 'authority',
      valueType: 'select',
      search:false,
      request,
    },
    {
      title: "状态",
      dataIndex: 'is_active',
      valueType: 'text',
      render: text => <Tag color={text ? '#108ee9' : '#f50'}>{text ? '正常' : '已禁用'}</Tag>,
      hideInForm:true,
      search:false
    },
    {
      title: "操作",
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              handleUpdateModalVisible(true);
              setuserId(record.id)
              setStepFormValues(record)
            }}
          >
            编辑
          </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable<UserTableListItem>
        headerTitle={"查询最新版本"}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button type="primary" key="primary" onClick={() => handleCreateModalVisible(true)}>
            <PlusOutlined /> 添加用户
          </Button>,
        ]}
        request={(params, sorter, filter) => userList({ ...params, sorter, filter })}
        columns={columns}
      />
      <CreateForm onCancel={() => handleCreateModalVisible(false)} modalVisible={createModalVisible}>
        <ProTable<UserTableListItem, UserTableListItem>
          onSubmit={async (value) => {
            const success = await userCreate(value);
            if (success) {
              handleCreateModalVisible(false);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          rowKey="key"
          type="form"
          columns={columns}
        />
      </CreateForm>
      <UpdateForm
        onCancel={() => {
          handleUpdateModalVisible(false);
          actionRef.current?.reload();
        }}
        modalVisible={updateModalVisible}
        userid={userid}
        values={stepFormValues}
      />
    </PageContainer>
  );
};

export default TableList;
